<!-- 宝箱签到 -->
<template>
	<view class="qdbox hdtybox" :class="hdc">
		<topboxVue :tit="$t('hd.bt1')"></topboxVue>
		<view class="qdbox-bxbox">
			<view class="bj_between mb30">
				<view class="bj_center bj_sx" :class="item.is_received==1 ? 'qdbox-bxbox-act' : 'qdbox-bxbox-item'"
					v-for="(item , i) in bxlist" :key="i" >
					<image :src="'/static/hd/bx'+(i+1)+'.png'" class="qdbox-bxbox-item-bxpic"></image>
					<view class="">
						{{item.tit}}
					</view>
					<image src="/static/hd/bxc.png" class="qdbox-bxbox-item-ch" v-if="item.ch"></image>
				</view>
			</view>
			<!--文字说明部分-->
			<view class="qdbox-qdinfo">
				<view class="bj_between mb20">
					<text>{{$t("hd.tit2")}}</text>
					<text class="qdbox-qdinfo-time">
						{{jointime}}
					</text>
				</view>
				<view class="mb40">
					{{$t("hd.tit3")}}
				</view>
				<view class="qdbox-qdinfo-txt mb30">
					{{$t("hd.txt")}}
				</view>
				<view class="qdbox-qdinfo-info">
					<view class="qdbox-qdinfo-info-mtxt">
						{{$t("menu.$")}}{{detail.treasure_next?.recharge}}
					</view>
					<view class="bj_left mb20 f28">
						<image src="/static/hd/ico1.png" class="qdbox-qdinfo-info-ico"></image>
						<text>{{$t("hd.stit1")}}</text>
						<text class="qdbox-y">
							{{$t("menu.$")}}{{detail.treasure_next?.normal_bonus_min}}~{{$t("menu.$")}}{{detail.treasure_next?.normal_bonus_max}}
						</text>
					</view>
					<view class="bj_left f28">
						<image src="/static/hd/ico1.png" class="qdbox-qdinfo-info-ico"></image>
						<text>{{$t("hd.stit1")}}</text>
						<text class="qdbox-y">
							{{$t("menu.$")}}{{detail.treasure_next?.super_bonus_min}}~{{$t("menu.$")}}{{detail.treasure_next?.super_bonus_max}}
						</text>
					</view>
				</view>
				<view class="qdbox-qdinfo-btn">
					{{$t("hd.btn1")}}
				</view>
			</view>
			<!--列表部分-->
			<view class="cff f24 mb40">
				<view class="qdbox-qdinfo-tabtit bj_between">
					<view class="w33 tc">
						{{$t("hd.tit4")}}
					</view>
					<view class="w33 tc">
						{{$t("hd.tit5")}}
					</view>
					<view class="w33 tc">
						{{$t("hd.tit6")}}
					</view>
				</view>
				<view class="qdbox-qdinfo-tabtr bj_between" v-for="(item,index) in jlList" :key="index">
					<view class="w33 tc">
						{{item.tit}}
					</view>
					<view class="w33 tc">
						{{$t("menu.$")}}{{Number(item.normal_bonus_min)}}~{{$t("menu.$")}}{{Number(item.normal_bonus_max)}}
					</view>
					<view class="w33 tc">
						{{$t("menu.$")}}{{Number(item.super_bonus_min)}}~{{$t("menu.$")}}{{Number(item.super_bonus_max)}}
					</view>
				</view>
			</view>
			<!--介绍部分-->
			<view class="mb20 f30 fwb">
				{{$t("hd.tit7")}}
			</view>
			<view class="mb10 f22 c9c" v-for="i in 5" :key="i">
				{{$t("hd.info.txt" + i)}}
				<template v-if="i==5">
					{{detail.water_multi}}{{$t("hd.info.txt6")}}
				</template>
			</view>

		</view>
		<zero-loading type="surround" v-if="loading"></zero-loading>
		<bottomVue style="margin-top: 100rpx;"></bottomVue>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import common from '../../js/common';
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("clhd");
	let hdc = ref("hdpagein")
	let now = ref(new Date())
	let bxlist = ref([])
	
	// 登记时间
	const jointime=ref('')
	// 加载
	const loading=ref(false)
	// 初始化获取的数据
	const detail=ref({})
	// 奖励列表
	const jlList=ref([])


	// 选择宝箱
	function chbx(item) {
		if(item.day<=detail.value.day){
			item.ch = true
		}
		
		
	}

	function repage() {
		hdc.value = "hdpageout";
		clhd();
	}
	
	// 初始化
	function init(){
		loading.value=true
		common.rechargeTreasureInit().then(res=>{
			detail.value=res.data.data||{}
			const {treasure_config}=detail.value
			
			treasure_config.forEach(item=>{
				item.tit=t("bx.tit0")+item.day
				// 是否已经开启
				
			})
			
			bxlist.value=[...treasure_config]
			
			jlList.value=[...treasure_config]
			
			loading.value=false
		})
	}
	
	
	onShow(()=>{
		jointime.value=getApp().globalData.userInfo.user.jointime
		init()
	})
</script>

<style lang="scss">
	
	.qdbox {

		&-y {
			color: #FFBE32;
		}

		&-bxbox {
			padding: 30rpx 20rpx;

			&-item {
				position: relative;
				width: 112rpx;
				height: 128rpx;
				border-radius: 12rpx;
				font-size: 24rpx;
				color: #BDC2E0;
				background: #00561D;

				&-bxpic {
					width: 68rpx;
					height: 68rpx;
				}

				&-ch {
					position: absolute;
					width: 36rpx;
					height: 36rpx;
					top: 0;
					right: 0;
				}
			}

			&-act {
				position: relative;
				width: 112rpx;
				height: 128rpx;
				border-radius: 12rpx;
				font-size: 24rpx;
				background: url("/static/hd/b1.png") no-repeat center center;
				background-size: 100% 100%;
				color: #FFFFFF;
			}
		}

		&-qdinfo {
			background: #00561D;
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			padding: 26rpx 20rpx;
			margin-bottom: 30rpx;

			&-time {
				color: #9C9FB2;
			}

			&-txt {
				color: #9C9FB2;
				text-align: center;
				padding: 0 56rpx;
			}

			&-btn {
				height: 84rpx;
				line-height: 84rpx;
				background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
				border-radius: 16rpx;
				text-align: center;
				font-size: 40rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			&-info {
				background: #003311;
				border-radius: 16rpx;
				border: 2rpx solid #029132;
				padding: 42rpx 28rpx;
				margin-bottom: 20rpx;

				&-mtxt {
					color: #FFBE32;
					font-size: 60rpx;
					font-weight: bold;
					text-align: center;
					margin-bottom: 20rpx;
				}

				&-ico {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}
			}

			&-tabtit {
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient( 90deg, #00561D 0%, #007E2A 100%);
				border-radius: 20rpx 20rpx 0rpx 0rpx;
			}

			&-tabtr {
				height: 84rpx;
				line-height: 84rpx;
				background: #00561D;
			}

			&-tabtr:nth-child(odd) {
				background: #083F1A;
			}

			&-tabtr:last-child {
				border-radius: 0rpx 0rpx 20rpx 20rpx;
			}
		}
		
		
		// 结果弹窗
		
	}
</style>